<template>
    <div>
        <el-row style="margin-top: 20px" type="flex" align="middle">
            <el-col :span="4">
                <el-button type="primary" @click="checkAddBt" size="medium">
                    新增
                </el-button>
            </el-col>
            <el-dialog
                    title="新增排班"
                    :close-on-click-modal='false'
                    :visible.sync="addDialogVisible"
                    width="30%"
                    center="">
                <el-row type="flex" align="middle">
                    <el-col :span="10" align="right">
                        <span>日期：</span>
                    </el-col>
                    <el-col :span="12">
                        <el-date-picker
                                v-model="addDate"
                                type="date"
                                size="medium"
                                :picker-options="pickerOption"
                                style="width: 150px;margin-right: -10px"
                                placeholder="选择日期">
                        </el-date-picker>
                    </el-col>
                </el-row>
                <el-row type="flex" align="middle" style="margin-top: 20px">
                    <el-col :span="10" align="right">
                        <span>时段：</span>
                    </el-col>
                    <el-col :span="12">
                        <diySelect :optionData="timeOptionData" size="medium" :propsValue="timeSelect"
                                   @choose="chooseTime"></diySelect>
                    </el-col>
                </el-row>
                <el-row type="flex" align="middle" style="margin-top: 20px">
                    <el-col :span="10" align="right">
                        <span>排班人员：</span>
                    </el-col>
                    <el-col :span="12">
                        <diySelect size="medium" :optionData="addPeopleOptionData" :propsValue="peopleSelect"
                                   @choose="choosePeople"></diySelect>
                    </el-col>
                </el-row>
                <span slot="footer" class="dialog-footer">
    <el-button @click="addDialogVisible = false" size="medium">取 消</el-button>
    <el-button type="primary" @click="addDialogCommit" size="medium">确 定</el-button>
  </span>
            </el-dialog>
            <el-dialog
                    title="修改排班"
                    :visible.sync="fixDialogVisible"
                    :close-on-click-modal='false'
                    width="30%"
                    :before-close="resetIsGetFor"
                    center="">
                <el-row type="flex" align="middle">
                    <el-col :span="10" align="right">
                        <span>日期：</span>
                    </el-col>
                    <el-col :span="12">
                        <el-date-picker
                                v-model="fixDate"
                                type="date"
                                size="medium"
                                :clearable="false"
                                :picker-options="pickerOption"
                                style="width: 150px;margin-right: -10px"
                                placeholder="选择日期">
                        </el-date-picker>
                    </el-col>
                </el-row>
                <el-row type="flex" align="middle" style="margin-top: 20px">
                    <el-col :span="10" align="right">
                        <span>时段：</span>
                    </el-col>
                    <el-col :span="12">
                        <diySelect :optionData="timeOptionData" size="medium" :propsValue="fixTimeSelect"
                                   @choose="chooseFixTime"></diySelect>
                    </el-col>
                </el-row>
                <el-row type="flex" align="middle" style="margin-top: 20px">
                    <el-col :span="10" align="right">
                        <span>排班人员：</span>
                    </el-col>
                    <el-col :span="12">
                        <diySelect size="medium" :optionData="addPeopleOptionData" :propsValue="fixPeopleSelect"
                                   @choose="chooseFixPeople"></diySelect>
                    </el-col>
                </el-row>
                <span slot="footer" class="dialog-footer">
    <el-button @click="fixCancel" size="medium">取 消</el-button>
    <el-button type="primary" @click="fixArrange" size="medium">确 定</el-button>
  </span>
            </el-dialog>

            <el-dialog
                    title=""
                    center=""
                    width="20%"
                    :close-on-click-modal='false'
                    :visible.sync="deleteArrangeDialogVisible">
                <el-row style="font-size: 16px;">
                    <el-col align="center">
                        <span>确认删除</span>

                    </el-col>
                </el-row>
                <span slot="footer" class="dialog-footer">
    <el-button @click="deleteArrangeDialogVisible = false" size="medium">取 消</el-button>
    <el-button type="primary" @click="deleteArrange" size="medium">确 定</el-button>
  </span>
            </el-dialog>

            <el-col :span="4" :offset="9" type="flex" align="right">
                <el-date-picker
                        v-model="searchDate"
                        type="date"
                        size="medium"
                        style="width: 150px;margin-right: -10px"
                        placeholder="选择日期">
                </el-date-picker>
            </el-col>

            <el-col :span="4" type="flex" align="right">
                <el-input
                        style="width: 150px"
                        size="medium"
                        clearable
                        v-model="searchName"
                        placeholder="请输入姓名">

                </el-input>
            </el-col>
            <el-col :span="3" align="right">
                <el-button type="primary" size="medium" icon="el-icon-search" @click="firstSearch">
                    搜索
                </el-button>
            </el-col>
        </el-row>
        <el-row style="margin-top: 20px; min-height: 330px">
            <el-col>
                <el-table
                        :cell-style="this.$store.state.cellCssObj"
                        :header-cell-style="this.$store.state.headerCssObj"
                        @cell-click="cellClick"
                        border
                        :row-class-name="rowClassName"
                        :data="pageData">
                    <el-table-column
                            align="center"
                            prop="workDay"
                            label="日期">
                    </el-table-column>
                    <el-table-column
                            align="center"
                            prop="timeSlot"
                            label="时段">
                    </el-table-column>
                    <el-table-column
                            align="center"
                            prop="peopleNum"
                            label="排班人数">
                    </el-table-column>
                    <el-table-column
                            align="center"
                            prop="name"
                            label="排班人员">
                    </el-table-column>
                    <el-table-column
                            align="center"
                            label="操作">
                        <el-button type="primary" @click="chechFixBt"
                                   size="mini"
                        >
                            修改
                        </el-button>
                        <el-button type="danger" @click="deleteArrangeDialogVisible=true"
                                   size="mini">
                            删除
                        </el-button>
                    </el-table-column>

                </el-table>
            </el-col>

        </el-row>
        <el-row style="margin-top: 20px">
            <el-col align="center">

                <paging :obj="pagingData"></paging>
            </el-col>
        </el-row>
    </div>
</template>

<script>
    import {mapActions} from 'vuex'

    export default {

        name: "employeeSchedulingPage",
        computed: {
            pagingData() {
                var that = this;
                return {
                    pageSize: 5,//一页展示几条数据
                    pagerCount: 5, //超过多少页打点省略

                    pageCount: that.pageCount, //一共多少页

                    currentChange(num) {
                        that.currentPage = num//改变当前页
                        console.log(that.currentPage);
                        if (!that.pageType) {
                            that.pageSelect();
                        } else {
                            that.searchPage()
                        }
                    },

                }
            },
            addWorkDay: {
                get: function () {
                    let yy = this.addDate.getFullYear()
                    let mm = (this.addDate.getMonth() + 1) < 10 ? '0' + (this.addDate.getMonth() + 1) : (this.addDate.getMonth() + 1)
                    let dd = this.addDate.getDate() < 10 ? '0' + this.addDate.getDate() : this.addDate.getDate()
                    return yy + '-' + mm + '-' + dd
                },
                set: function () {

                }
            },


            arrangeId: {
                get: function () {
                    return this.pageData[this.checkedRowIndex].arrangeId
                },
                set: function (val) {
                    this.pageData[this.checkedRowIndex].arrangeId = val;
                }
            },

            // fixDate: {
            //     get: function () {
            //         return this.pageData[this.checkedRowIndex].workDay
            //     },
            //     set: function (date) {
            //         // console.log(date);
            //         let yy = date.getFullYear()
            //         let mm = (date.getMonth() + 1) < 10 ? '0' + (date.getMonth() + 1) : (date.getMonth() + 1)
            //         let dd = date.getDate() < 10 ? '0' + date.getDate() : date.getDate()
            //         this.pageData[this.checkedRowIndex].workDay = yy + '-' + mm + '-' + dd;
            //     }
            // },

            // fixTimeSelect: {
            //     get: function () {
            //         return this.oldPageData[this.checkedRowIndex].timeSlot
            //     },
            //     set: function (val) {
            //         this.oldPageData[this.checkedRowIndex].timeSlot = val;
            //     }
            // },

            fixPeopleSelect: {
                get: function () {
                    if (this.isGetFor) {
                        for (let item of this.addPeopleOptionData) {
                            if (item.label === this.pageData[this.checkedRowIndex].name) {
                                this.fixPeopleSelectValue = item.value
                            }
                        }
                    }

                    return this.fixPeopleSelectValue;
                },
                set: function (val) {
                    // this.addPeopleOptionData[this.checkedRowIndex].value = val;
                    this.isGetFor = false;
                    this.fixPeopleSelectValue = val;
                }
            },


        },
        data() {
            return {
                fixTimeSelect:'',
                fixDate: '',
                isGetFor: true,
                fixPeopleSelectValue: '',
                fixDialogVisible: false,
                value: new Date(),
                searchValue: '',
                currentPage: 1,
                searchDate: '',
                peopleSelect: '',
                timeSelect: '',
                pageCount: 0,
                addDate: '',
                addDialogVisible: false,
                pageType: 0,
                searchName: '',
                deleteArrangeDialogVisible: false,
                timeOptionData: [{value: 0, label: '08:00-14:00'}, {value: 1, label: '14:00-22:00'}],
                addPeopleOptionData: [{value: 0, label: 'u01'}, {value: 1, label: 'u02'}],      //需要接口动态设置下拉列表的选项
                pageData: [{}],
                oldPageData: [{}],
                pickerOption: {
                    disabledDate(time) {
                        return time.getTime() < Date.now()  //设置只能选择今天之后的日期
                    }
                },
                checkedRowIndex: 0,
            }
        },
        mounted() {
            this.pageSelect()
        },
        methods: {
            ...mapActions(['addArrangeAct', 'pageSelectAct', 'getTime', 'userOperation', 'searchPageAct',
                'fixArrangeAct', 'deleteArrangeAct']),
            /*下拉列表选择时间*/
            chooseTime(val) {
                this.timeSelect = val;    //获取选项值
            },
            /*下拉列表选择人员*/
            choosePeople(val) {
                this.peopleSelect = val;    //获取选项值
            },
            /*修改排班下拉列表选择人时段*/
            chooseFixTime(val) {
                this.fixTimeSelect = val;    //获取选项值
            },
            /*修改排班下拉列表选择人员*/
            chooseFixPeople(val) {
                this.fixPeopleSelect = val;    //获取选项值
            },
            /*发送日志*/
            operation(actTypeStr) {
                this.getTime(); //更新时间
                let obj = {
                        userName: this.$store.state.user.userName,
                        operationDate: this.$store.state.nowTime.time,
                        operationMessage: actTypeStr,
                    }
                ;
                this.userOperation(obj);
            },

            /*增加排班*/
            addDialogCommit() {
                console.log(Boolean(this.addDate));
                console.log(Boolean(String(this.timeSelect)));
                console.log(Boolean(String(this.peopleSelect)));
                if (this.addDate && String(this.timeSelect) && String(this.peopleSelect)) {


                    // console.log(Date.now());
                    // console.log(this.addWorkDay, this.peopleSelect[0], this.timeSelect);

                    let obj = {
                        workDay: this.addWorkDay,
                        timeSlot: this.timeSelect,
                        name: this.addPeopleOptionData[this.peopleSelect].label,
                    }
                    this.addArrangeAct(obj)
                        .then(resp => {
                            // console.log(resp);
                            if (resp.Code === 200) {

                                this.addDialogVisible = false;
                                this.$message({
                                    message: '添加成功',
                                    center: true,
                                    type: 'success'
                                });
                                if (this.pageType) {
                                    this.searchPage();
                                } else {
                                    this.pageSelect();
                                }
                                this.operation("新增排班") //发送日志
                            }

                        }).catch(err => {
                        console.log(err);
                    })
                } else {
                    this.$message({
                        message: '请输入完整信息',
                        center: true
                    })
                }
            },
            /*分页查询排班信息*/
            pageSelect() {
                console.log(this.currentPage);
                let obj = {currentPage: this.currentPage, pageSize: 5}
                this.pageSelectAct(obj).then(resp => {
                    console.log(resp);
                    if (resp.Code === 200) {
                        // console.log(resp.PageCount);
                        this.pageCount = resp.PageCount
                        if (resp.RosterList.length > 0) {
                            this.oldPageData = JSON.parse(JSON.stringify(resp.RosterList))
                            this.pageData = this.pageDataExchange(resp.RosterList);

                        } else if (this.currentPage > 1) {
                            this.currentPage--;
                            this.pageSelect()
                        } else {
                            this.pageData = [{}]
                        }

                    }
                }).catch(err => {
                    console.log(err);
                })
            },
            /*第一次条件查询*/
            firstSearch() {
                this.pageType = 1;
                this.currentPage = 1;
                this.searchPage()
            },
            /*分页条件查询*/
            searchPage() {
                console.log(this.currentPage);
                let obj = {currentPage: this.currentPage, pageSize: 5, searchName: this.searchName}
                this.searchPageAct(obj).then(resp => {
                    if (resp.Code === 200) {
                        console.log(resp.PageCount);
                        this.pageCount = resp.PageCount
                        if (resp.RosterList.length > 0) {
                            this.oldPageData = JSON.parse(JSON.stringify(resp.RosterList))
                            this.pageData = this.pageDataExchange(resp.RosterList);

                        } else if (this.currentPage > 1) {
                            this.currentPage--;
                            this.searchPage()
                        } else {
                            this.pageData = [{}]
                        }

                    }
                }).catch(err => {
                    console.log(err);
                })
            },
            /*点击修改按钮*/
            chechFixBt() {
                this.fixDialogVisible = true;
            },
            /*重置控制变量isGetFor*/
            resetIsGetFor() {
                this.isGetFor = true;
                this.fixDialogVisible = false;
            },
            /*修改排班信息*/
            fixArrange() {
                console.log(this.addPeopleOptionData);
                console.log(this.peopleSelect);
                let obj = {
                    arrangeId: this.pageData[this.checkedRowIndex].arrangeId,
                    workDay: this.fixDate,
                    timeSlot: this.fixTimeSelect,
                    name: this.addPeopleOptionData[this.fixPeopleSelect].label,
                }
                console.log(obj);
                this.fixArrangeAct(obj)
                    .then(resp => {
                        // console.log(resp);
                        if (resp.Code === 200) {
                            this.operation("修改排班") //发送日志
                            this.resetIsGetFor()
                            this.$message({
                                message: '修改成功',
                                center: true,
                                type: 'success'
                            });
                            if (this.pageType) {
                                this.searchPage();
                            } else {
                                this.pageSelect();
                            }
                        }

                    }).catch(err => {
                    console.log(err);
                })
            },
            /*取消修改*/
            fixCancel() {
                this.resetIsGetFor();
            },
            /*删除排班信息*/
            deleteArrange() {

                let index = this.pageData[this.checkedRowIndex].arrangeId
                console.log(index);
                this.deleteArrangeAct(index).then(resp => {
                    console.log(resp);
                    if (resp.Code === 200) {
                        this.operation("删除排班") //发送日志
                        this.deleteArrangeDialogVisible = false
                        this.$message({
                            type: 'success',
                            center: true,
                            message: '删除成功'
                        })
                        if (this.pageType) {
                            this.searchPage();
                        } else {
                            this.pageSelect();
                        }
                    }
                }).catch(err => {
                    console.log(err);
                })
            },

            /*点击添加按钮*/
            checkAddBt() {
                /*清除下拉列表选择记录*/
                this.addDate = '';
                this.timeSelect = '';
                console.log(this.timeSelect);
                this.peopleSelect = '';
                this.addDialogVisible = true

            },

            //为表格的行添加index属性
            rowClassName({row, rowIndex}) {
                // console.log(row, rowIndex);
                row.index = rowIndex
            },
            /*获取行下标*/
            cellClick(row) {
                console.log(row.index);
                this.checkedRowIndex = row.index;
                this.fixDate = this.pageData[this.checkedRowIndex].workDay;
                this.fixTimeSelect = this.oldPageData[this.checkedRowIndex].timeSlot;

            },
            pageDataExchange(data) {
                let arr = data;
                for (let item of arr) {
                    if (item.timeSlot === 0) {
                        item.timeSlot = '08:00-14:00'
                    } else if (item.timeSlot === 1) {
                        item.timeSlot = '14:00-22:00'
                    }
                }
                return arr
            },      //时段数据转换

        },

    }
</script>

<style scoped>

</style>